<template>
    <div style="margin: 25px">
        <el-row style="margin-bottom: 20px;">
            <el-col :span="12" >
                <el-button type="primary" @click="dialogFormVisible = true">新增+</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="table-sty">
                    <el-table :data="tableDataList" style="width: 100%">
                        <el-table-column type="index" width="50px" :index="indexMethod" label="序号"></el-table-column>
                        <el-table-column  v-for="(value) in tableTitleList" :prop="value|pinyin" :label="value"> </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                

                                    <button type="button" @click="handleEdit(scope.$index, scope.row)" class="el-button el-button--text el-button--small"><!----><i class="el-icon-edit"></i><span>修改
          </span></button>


                    

          <button type="button" class="el-button el-button--text el-button--small"  @click="handleDelete(scope.$index, scope.row)"><!----><i class="el-icon-delete"></i><span>删除
          </span></button>

                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="getDialogTitle(action) + '联动控制'" :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="formData" :ref="formData">
                <el-form-item   label="事件名称" :label-width="formLabelWidth">
                    <el-input  v-model="formData.eventName" autocomplete="off" style="width: 60%;"></el-input>
                </el-form-item> 

                <el-form-item label="事件级别" :label-width="formLabelWidth">
                    <el-select v-model="formData.eventLevel" placeholder="请选择事件级别" style="width: 60%;">
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="紧急" value="紧急"></el-option>
                    <el-option label="危险" value="危险"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="触发规则" :label-width="formLabelWidth">
                    <el-select v-model="formData.linkageRule" placeholder="请选择触发规则" style="width: 60%;">
                    <el-option label="烟雾报警" value="烟雾报警"></el-option>
                    <el-option label="漏电检测器报警" value="漏电检测器报警"></el-option>
                    <el-option label="水压检测器报警" value="水压检测器报警"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="执行动作" :label-width="formLabelWidth">
                    <el-select v-model="formData.action" placeholder="请选择执行动作" style="width: 60%;">
                    <el-option label="关闭电闸" value="关闭电闸"></el-option>
                    <el-option label="打开消防栓" value="打开消防栓"></el-option>
                    <el-option label="通知维修" value="通知维修"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="责任人" :label-width="formLabelWidth">
                    <el-select v-model="formData.chargeMan" placeholder="请选择责任人" style="width: 60%;">
                    <el-option label="管理员" value="管理员"></el-option>
                    </el-select>
                </el-form-item>

                

                <el-form-item label="活动时间" :label-width="formLabelWidth">
                        <el-date-picker style="width: 60%;"
                                v-model="formData.date"
                                type="datetime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                       
                </el-form-item>


                <el-input type="hidden" ref="dataKey" name="id" v-model="dataKey" ></el-input>
                <el-input type="hidden" ref="actionInfo" v-model="action" ></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
const pinyin = require("js-pinyin");


const tableTitleList = ["触发条件", "执行动作", "执行顺序", "责任人", "启用状态","创建时间"];
const dataList = [
    ["设备触发", "设备输出", "消防排烟机", "管理员", '启用', "2023-12-21 08:20:32"],
    ["烟感报警", "电脑输出", "干粉灭火器", "管理员", '启用', "2023-12-21 08:20:32"],
];


const initialFormField = [];
function setFormData(data = {}){
    let formData = {};
    for (let i in tableTitleList){
        initialFormField[i] = pinyin.getFullChars(tableTitleList[i]);
        if(Object.keys(data).length > 0){
            formData[initialFormField[i]] = data[initialFormField[i]];
        }else {
            formData[initialFormField[i]] = "";
        }
    }
    return formData;
}
const formData = setFormData();

console.log(initialFormField);
const tableDataList = [];
for (let k in dataList){
    let data = {};
    for (let k2 in initialFormField){
        data[initialFormField[k2]] = dataList[k][k2];
    }
    tableDataList.push(data);
}
console.log(tableDataList);

export default {
    name:"linkcontrol",
    filters : {
        pinyin : function (value){
            return pinyin.getFullChars(value);
        }
    },
    data() {
        return {
            dataKey : 0,
            action : 'create',
            initialFormField : initialFormField,
            dialogFormVisible: false,
            formData: { 
                eventName:"",
                eventLevel:"",
                linkageRule:"",
                action:"",
                status:"",
                chargeMan:"",
                createAt:"",
                creator:"",
                date:"",
            },
            formLabelWidth: '120px',
            tableTitleList : tableTitleList,
            tableDataList : tableDataList
        };
    },
    methods:{
        indexMethod(index) {
            return index + 1;
        },
        handleEdit(index, rowData){
            debugger
            console.log(index);
            console.log(rowData);
            this.formData = setFormData(rowData);


            this.formData.eventName=rowData[pinyin.getFullChars("触发条件")]
            this.formData.eventLevel=rowData[pinyin.getFullChars("执行动作")]
            this.formData.linkageRule=rowData[pinyin.getFullChars("执行顺序")]
            this.formData.action=rowData[pinyin.getFullChars("责任人")]
            this.formData.chargeMan=rowData[pinyin.getFullChars("启用状态")]
            this.formData.status=rowData[pinyin.getFullChars("创建时间")]
            

            var dateTime= rowData[pinyin.getFullChars("创建时间")]
            if (dateTime != "") {
                var dateTimeArr=dateTime.split(" ");
                this.formData.date=dateTime
            }


            this.dataKey = index;
            this.action = "edit";
            this.dialogFormVisible = true;
        },
        handleDelete(index , rowData){
            this.$confirm("确认删除？" , "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() =>{
                this.tableDataList.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            });
        },
        closeDialog(){
            this.formData = setFormData();
        },
        getDialogTitle(action){
            let actText = "";
            switch (action){
                case 'create':
                    actText = "创建";
                    break
                case 'edit':
                    actText = "编辑";
                    break
            }
            return actText;
        },
        submitForm(){
            console.log(this.$refs.actionInfo.value);
            if(this.$refs.actionInfo.value == 'create'){
                let newData = setFormData(this.formData);

                



                this.tableDataList.push(newData);
                this.$message({
                    type: 'success',
                    message: '创建成功!'
                });
                console.log(this.tableDataList);
            }
            if(this.$refs.actionInfo.value == 'edit'){
                console.log(this.$refs.dataKey.value);
                let newData = setFormData(this.formData);
                this.$set(this.tableDataList,this.$refs.dataKey.value,newData);
                this.$message({
                    type: 'success',
                    message: '编辑成功!'
                });
                console.log(this.tableDataList);
            }
            this.dialogFormVisible = false;
        }

    }
};
</script>
<style>
.el-table_1_column_1 .cell div{
    text-align: center;
}
</style>
